<template>
	<view :class="['container',isClosePage?'fade-out-element':'fade-in-element']" :style="{'pointer-events':isClosePage?'none':'all'}">
		<!-- <navigationBar :emitBackEvent="true" @backEvent="backHandle" :my-property="navigationBarDataInfo" /> -->
		<view class="main-wrapper" :style="[
        {'background-image':(`url(${staticImgs.bg})`)},
        {'height': pageH}
      ]">

			<view class="start-btn-pos">
				<view class="start-btn" @click="startScl()" :style="{'background-image':(`url(${staticImgs.btnImg})`)}">
				</view>
			</view>
		</view>
		<image :src="back_scl_list" mode=""
			style="position: absolute;left: -6rpx;top: 485rpx;z-index: 99;width: 135rpx;height: 100rpx;"
			@click="backSclList()"></image>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		props: {
			sclInfo: {
				type: Object,
				default: () => {}
			},
		},
		data() {
			return {
				isClosePage: false,
				back_scl_list: this.imgBaseURL + '/scl/dongwulianai/back_scl_list.png',
				staticImgs: {
					bg: this.imgBaseURL + '/scl/dongwulianai/introduce/bg-img.png',
					btnImg: this.imgBaseURL + '/scl/dongwulianai/introduce/enter-img.png',
				},
				firstTipTextArrVisible: [
					false, false, false, false
				],
				f_visible_1: false,
				f_visible_2: false,
				f_visible_3: false,
				f_visible_4: false,
				navigationBarDataInfo: {
					"bg_color": "rgba(0,0,0,0)",
					"color": "#fff",
					"flag": 4,
					"name": "动物恋爱",
					"hasEntity": false,
				},
				navH: 0,
				pageH: '100vh'
			}
		},
		watch: {
			sclInfo: {
				handler(val) {
					if (val) {
						this.navigationBarDataInfo.name = val.sclName
					}
				},
				immediate: true
			},
		},
		mounted() {
			this.navH = app.globalData.topHeight // * 2

			console.log(app.globalData, '----app.globalData--')

			// this.pageH = app.globalData.screenHeight - this.navH + 'px'
		},
		methods: {
			startScl() {
				this.isClosePage = true;
				this.$emit('startScl')
			},
			backHandle() {
				this.$emit('backHandle')
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 定义淡出动画 */
	@keyframes fade-out {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}

	/* 使用淡出动画 */
	.fade-out-element {
		animation: fade-out 1s ease-in-out forwards;
	}
	
	/* 定义淡入动画 */
	@keyframes fade-in {
	    from {
	        opacity: 0;
	    }
	    to {
	        opacity: 1;
	    }   
	}
	   
	/* 使用淡入动画 */   
	.fade-in-element {
	    animation: fade-in 1s ease-in-out forwards;   
	}


	@keyframes shake {
		0% {
			transform: translate(0);
		}

		25% {
			transform: translate(-3px, 3px);
		}

		50% {
			transform: translate(3px, -3px);
		}

		80% {
			transform: translate(0);
		}

		// 75% { transform: translate(-5px, 5px); }
		// 100% { transform: translate(0); }
	}

	@keyframes stay {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 1;
		}
	}


	.container {
		width: 100vw;
		box-sizing: border-box;
		min-height: 100vh;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;
	}

	.main-wrapper {
		width: 100vw;
		height: 100%;
		background-size: cover;
		background-repeat: no-repeat;
		position: relative;

		.indicate {
			display: flex;
			flex-direction: column;
			position: relative;
			height: 158rpx;
			width: 750rpx;

			box-sizing: border-box;
			padding-top: 136rpx;


			.user_hint {
				opacity: 0;
				width: 100%;
				text-align: center;

				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;
				line-height: 70rpx;
				font-style: normal;

				.img {
					margin-top: 54rpx;
					width: 560rpx;
					height: 80rpx;
					margin: auto;
				}
			}

		}


		.start-btn-pos {
			position: fixed;
			bottom: 0rpx;
			left: 0;
			right: 0;

			.start-btn {
				width: 500rpx;
				height: 198rpx;
				margin: auto;
				background-size: 100% 100%;
			}
		}
	}
</style>